<template>
	<view class="bind-phone">
		<view class="box">
			<!-- 基础表单校验 -->
			<el-form ref="form" :rules="rules" :model="form" label-position="top">
				<el-form-item prop="phone" required>
					<el-input v-model="form.phone" placeholder="请输入手机号" />
				</el-form-item>
				<el-form-item prop="password" v-if="!curIndex">
					<el-input type="password" v-model="form.password" placeholder="请输入密码" />
				</el-form-item>
				<el-form-item prop="code" required v-if="curIndex">
					<el-input v-model="form.code" placeholder="请输入验证码" style="width: 60%;" />
					<el-button type="primary" @click="getVerificationCode" :disabled="isCountingDown"
						style="width: 38%;margin-left: 10rpx;">
						{{ countdownText }}
					</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submit('form')" style="width: 100%;">登录</el-button>
				</el-form-item>
			</el-form>

			<view class="tabar font28">
				<view :class="{'active':curIndex==0}" @click="selectMethods(0)">
					密码登录
				</view>
				<el-divider direction="vertical"></el-divider>
				<view :class="{'active':curIndex==1}" @click="selectMethods(1)">
					验证码登录
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		bindPhone,
		sendVerificationCode,
		passLogin,
		codeLogin,
		sendCode
	} from '@/api/user.js';

	export default {
		props: {
			showModal: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				curIndex: 0,
				form: {
					phone: '',
					code: '',
					password: '',
				},
				rules: {
					phone: [{
							required: true,
							message: '手机号不能为空',
							trigger: 'blur'
						},
						{
							pattern: /^1[3-9]\d{9}$/,
							message: '手机号格式不正确',
							trigger: 'blur'
						}
					],
					code: [{
							required: true,
							message: '验证码不能为空',
							trigger: 'blur'
						},
						{
							pattern: /^\d{4}$/,
							message: '验证码只能输入4位数字',
							trigger: 'blur'
						}
					]
				},
				countdown: 60,
				isCountingDown: false,
			};
		},
		computed: {
			countdownText() {
				return this.isCountingDown ? `${this.countdown}秒后重试` : '获取验证码';
			}
		},
		onLoad(options) {

		},
		methods: {
			selectMethods(type) {
				this.curIndex = type ? 1 : 0;
				if (type) {
					this.password = ''
				} else {
					this.code = ''
				}
			},
			// 是否来自“我的”页面
			isFromMyPage() {
				const pages = getCurrentPages();
				if (pages.length > 1) {
					const currentPage = pages[pages.length - 1];
					const fromPage = pages[pages.length - 2];

					if (fromPage.route === 'pages/user/index') {
						return true;
					} else {
						return false;
					}
				}
				return false;
			},
			submit(ref) {
				this.$refs[ref].validate().then(async () => {
					let res = {}
					// 验证码
					if (this.curIndex) {
						res = await codeLogin(this.form)
					} else {
						res = await passLogin(this.form)
					}
					// passLogin(this.form).then(res => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 500);
				});
			},
			getVerificationCode() {
				this.$refs.form.validateField('phone', (error) => {
					if (error) {
						uni.showToast({
							title: error,
							icon: 'none'
						});
						return;
					}
					// 调用发送验证码的接口
					sendCode({
						phone: this.form.phone
					}).then(res => {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						this.startCountdown();
					}).catch(err => {
						console.log('err', err);
						uni.showToast({
							title: '发送验证码失败',
							icon: 'none'
						});
					});
				});
			},
			startCountdown() {
				this.isCountingDown = true;
				this.countdown = 60;
				const interval = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
					} else {
						clearInterval(interval);
						this.isCountingDown = false;
					}
				}, 1000);
			}
		}
	};
</script>
<style lang="scss" scoped>
	.bind-phone {
		padding: 20rpx;
	}

	.box {
		width: 80%;
		margin: auto;
		margin-top: 250rpx;
	}

	.tabar {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #a5a7ac;
	}

	.active {
		color: #409eff;
	}

	.title {
		font-size: 34rpx;
		text-align: center;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.star {
		color: red;
		margin-right: 5rpx;
	}

	.btn {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.tui-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		line-height: 32rpx;
		min-width: 120rpx;
		flex-shrink: 0;
	}

	.tui-input {
		font-size: 32rpx;
		color: #333;
		padding-left: 20rpx;
		flex: 1;
		overflow: visible;
	}

	.tui-btn-box {
		padding: 40rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-button-gray {
		margin-top: 30rpx;
	}
</style>